<template>
  <view class="content">
    <view class="logo">
      <image src="../../static/logo.jpg" mode=""></image>
    </view>
    <view class="uni-form-item uni-column">
      <u--form
        labelPosition="left"
        :model="form"
        :rules="rules"
        ref="uForm"
        labelWidth="140rpx"
      >
        <u-form-item label="真实姓名" prop="userName" borderBottom ref="item1">
          <u--input v-model="form.userName" border="none"></u--input>
        </u-form-item>
        <u-form-item label="学号" prop="studentNumber" borderBottom ref="item1">
          <u--input v-model="form.studentNumber" border="none"></u--input>
        </u-form-item>
        <u-form-item label="年级" prop="grade" borderBottom ref="item1">
          <u--input v-model="form.grade" border="none"></u--input>
        </u-form-item>

        <u-form-item label="专业" prop="major" borderBottom ref="item1">
          <u--input v-model="form.major" border="none"></u--input>
        </u-form-item>
        <u-form-item label="手机号" prop="phone" borderBottom ref="item1">
          <u--input v-model="form.phone" border="none"></u--input>
        </u-form-item>
        <u-form-item label="验证码" prop="code" borderBottom ref="item1">
          <u--input v-model="form.code" border="none"></u--input>

          <view class="wrap" slot="right">
            <u-toast ref="uToast"></u-toast>
            <u-code
              :seconds="seconds"
              @end="end"
              @start="start"
              ref="uCode"
              @change="codeChange"
            ></u-code>
            <u-button @tap="getCode">{{ tips }}</u-button>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <button type="primary" @click="zhuce">注册账号</button>
    <view class="links">
      已有账号？
      <view class="link-highlight" @tap="gotoLogin">点此登陆</view>
    </view>
  </view>
</template>

<script>
import { register, getPhoneCode } from "../../api/login";
import { isMobile } from "@/utils/verify";
export default {
  data() {
    return {
      captchaImg: "",
      seconds: 60,
      tips: "",
      // refCode: null,
      codeBtn: {
        text: "获取验证码",
        waitingCode: false,
        count: this.seconds,
      },
      showSex: false,

      form: {
        code: "",
        major: "",
        phone: "",
        userName: "",
        grade:'',
        studentNumber:''
      },
      actions: [
        {
          name: "男",
        },
        {
          name: "女",
        },
        {
          name: "保密",
        },
      ],
      rules: {
        userName: {
          type: "string",
          required: true,
          message: "请填写真实姓名",
          trigger: ["blur", "change"],
        },
        studentNumber: {
          type: "string",
          required: true,
          message: "请填写年級",
          trigger: ["blur", "change"],
        },
        grade: {
          type: "string",
          required: true,
          message: "请填写年級",
          trigger: ["blur", "change"],
        },
        name: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          {
            // 自定义验证函数
            validator: (rule, value, callback) => {
              // 返回true表示校验通过，返回false表示不通过
              return isMobile(value);
            },
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["blur", "change"],
          },
        ],
        major: {
          type: "string",
          required: true,
          message: "请填写专业",
          trigger: ["blur", "change"],
        },
      },
      radio: "",
      switchVal: false,
    };
  },
  onLoad() {
    wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      console.log(this.form.phone, "this.form.phone");
      if (this.$refs.uCode.canGetCode) {
        getPhoneCode(this.form.phone).then((res) => {});
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast("验证码已发送");
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
    end() {
      // uni.$u.toast("倒计时结束");
    },
    start() {
      // uni.$u.toast("倒计时开始");
    },
    zhuce() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          register(this.form).then((res) => {
            uni.$u.toast("注册成功");
            uni.redirectTo({
              url: "/pages/login/index",
            });
          });
        })
        .catch((errors) => {
          // uni.$u.toast("校验失败");
        });
    },
    sendCode: function () {
      this.codeBtn.waitingCode = true;
      this.codeBtn.count = this.seconds;
      this.codeBtn.text = this.codeBtn.count + "s";

      let countdown = setInterval(() => {
        this.codeBtn.count--;
        this.codeBtn.text = this.codeBtn.count + "s";
        if (this.codeBtn.count < 0) {
          clearInterval(countdown);
          this.codeBtn.text = "重新发送";
          this.codeBtn.waitingCode = false;
        }
      }, 1000);
    },
    gotoLogin: function () {
      uni.redirectTo({
        url: "/pages/login/index",
      });
    },
  },
  computed: {
    disableCodeBtn: function () {
      return this.codeBtn.waitingCode || this.captchaImg.length < 4;
    },
  },
};
</script>

<style lang="scss" scoped>
$color-primary: #b49950;
.content {
  padding: 60upx 60upx 100upx;
}
.logo {
  text-align: center;
  image {
    height: 200upx;
    width: 200upx;
    margin: 0 0 40upx;
  }
}
.uni-form-item {
  margin-bottom: 40upx;
  padding: 0;
  border-bottom: 1px solid #e3e3e3;
  .uni-input {
    font-size: 30upx;
    padding: 7px 0;
  }
}
.column-with-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  button {
    border-radius: 50rpx;
    font-size: 24upx;
    margin: 0;
    width: 180upx;
    text-align: center;
    &:after {
      border: none;
    }
    &.active {
      background-color: $color-primary;
      color: $uni-text-color-inverse;
    }
  }
}
.img-captcha {
  width: 150upx;
  height: 60upx;
}
button[type="primary"] {
  background-color: $color-primary;
  border-radius: 0;
  font-size: 34upx;
  margin-top: 60upx;
  border-radius: 50rpx;
  box-shadow: 0 5upx 7upx 0 rgba(181, 153, 80, 0.2);
}
.links {
  text-align: center;
  margin-top: 40upx;
  font-size: 26upx;
  color: #999;
  view {
    display: inline-block;
    vertical-align: top;
    margin: 0 10upx;
  }
  .link-highlight {
    color: $color-primary;
  }
}
</style>
